<template>
	<view class="index">
		<view class="nav nav_bar">
			<view class="nav_compontent flex_center">
				<view class="back_btn flex_r_around" @click="$util.back()">
					<uni-icons type="left" :size="20"></uni-icons>
				</view>
				<view class="tabs">
					<u-tabs :list="tabs" @click="onTab" lineColor="#FD2A53"></u-tabs>
				</view>
			</view>
		</view>

		<view class="nav_box"></view>

		<view class="container">
			<messageList ref="message" v-if="tab == 1"></messageList>
			<videoList ref="video" v-if="tab == 2"></videoList>
			<expertList ref="expert" v-if="tab == 3"></expertList>
			<wallet ref="wallet" v-if="tab == 4"></wallet>
		</view>

	</view>
</template>

<script>
	import messageList from './component/messageList.vue';
	import videoList from './component/videoList.vue';
	import expertList from './component/expertList.vue';
	import wallet from './component/wallet.vue';

	export default {
		components: {
			messageList,
			videoList,
			expertList,
			wallet,
		},
		data() {
			return {
				tabs: [{
						name: '消息推广',
						id: 1,
					},
					{
						name: '视频推广',
						id: 2,
					},
					{
						name: '达人推广',
						id: 3,
					},
					{
						name: '广告余额',
						id: 4,
					},
				],

				tab: 1,
			}
		},
		methods: {
			onTab(e) {
				this.tab = e.id;
				if(this.tab == 1){
					this.$nextTick(() => {
						this.$refs.message.getRefresh();
					});
				}
			}
		},

		onReachBottom() {
			if (this.tab == 1) {
				// 消息推广
				this.$refs.message.getMore();
			}
			if (this.tab == 2) {
				// 视频推广
				this.$refs.video.getMore();
			}

			if (this.tab == 3) {
				// 达人推广
				this.$refs.expert.getMore();
			}

			if (this.tab == 4) {
				this.$refs.wallet.getMore();
			}
		},

		onShow() {
			if (this.tab == 1) {
				this.$nextTick(() => {
					this.$refs.message.getRefresh();
				});
			}
			if (this.tab == 4) {
				this.$refs.wallet.getRefresh();
			}
		}
	}
</script>

<style scoped lang="less">
	.nav_compontent {
		width: 100vh;
		height: 44px;

		.back_btn {
			width: 38px;
			height: 36px;
		}

		.tabs {
			flex: 1;
		}
	}
</style>